<template>
	<view class="detail_box" v-if="goods_info.goods_name">
		<!-- 轮播图区域 -->
		<swiper class="swiper_box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item class="swiper_item" v-for="(item, index) in goods_info.pics" :key="index">
				<image :src="item.pics_big" mode="" @click="preview(index)" />
			</swiper-item>
		</swiper>
		
		<!-- 商品信息区域 -->
		<view class="goods_info_box">
			<!-- 商品价格 -->
			<view class="goods_price">￥{{ goods_info.goods_price}}</view>
			<!-- 商品描述 + 收藏 -->
			<view class="goods_discribtion_box">
				<view class="goods_discribtion">{{ goods_info.goods_name }}</view>
				<view class="collect_box">
					<uni-icons type="star" size="20" />
					<view class="collect">收藏</view> 
				</view>
			</view>
			<!-- 运费 、免运费 -->
			<view class="fare">运费：免运费</view>
		</view>
		
		<!-- 详细图片 -->
		<!-- <rich-text :nodes="goods_info.goods_introduce" /> -->
		
		<!-- 商品导航区域 -->
		<view class="goods_nav_box">
			<!-- 插件方式导入到 Hbuilder -->
			<uni-goods-nav 
				:fill="true" 
				:options="options" 
				:buttonGroup="buttonGroup" 
				@click="onClick"
				@buttonClick="buttonClick" />
				<!-- 点击 【客服】【店铺】【购物车】触发 @click 事件  -->
				<!-- 点击 【加入购物车】【立即购买】触发 @buttonClick 事件  -->
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				goods_info: {},
				options: [
					{
						icon: 'headphones',
						text: '客服'
					}, 
					{
						icon: 'shop',
						text: '店铺',
						info: 2,
						infoBackgroudColor: '#007aff',
						infoColor: '#fff'
					},
					{
						icon: 'cart',
						text: '购物车',
						// info: JSON.parse(uni.getStorageSync('cart')).length || 0,		// storage 中没有数据时会报错
						info: 0
					}
				],
				buttonGroup: [
					{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		
		watch: {
			total: {
				handler(newVal) {
					let findResult = this.options.find(item => item.text === '购物车')
					findResult ? findResult.info = newVal : false
				},
				immediate: true
			},
			
		},
		
		// 当页面被加载被加载时触发
		onLoad(options) {
			console.log(options)
			const goods_id = options.goods_id
			this.getGoodsDetail(goods_id)
			// this.getCartList()
		},
		
		computed: {
			...mapState('store_cart', ['cart']),
			...mapGetters('store_cart', ['total'])
		},
		
		methods: {
			// 调用 store 中的 mutations
			...mapMutations('store_cart', ['addToCart']),
			
			// 获取 storage 中购物车数据
			getCartList() {
				uni.getStorageSync('cart') ? 
				this.options.find(item => item.text === '购物车').info = JSON.parse(uni.getStorageSync('cart')).length
				: 
				0
			},
			
			// 赋值 goods_info
			assign(res) {
				res.goods_introduce = res.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
				this.goods_info = res
			},
			async getGoodsDetail(goods_id) {
				// console.log('getGoodsList 方法执行', goods_id)
				
				// Android 好像不能识别 {goods_id} 参数
				let {data: res} = await uni.$http.get('https://escook.cn/api/public/v1/goods/detail', {goods_id})
				res.meta.status !== 200 ? uni.$showMsg : this.assign(res.message)
				console.log(res)
			},
			
			// 点击浏览图片
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.goods_info.pics.map(x => x.pics_big)
				})
			},
			// 跳转购物车页面
			gotoCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			
			// 监听商品导航的点击事件
			onClick(e) {
				e.content.text === '购物车' ? this.gotoCart() : false
			},
			
			// 监听右侧按钮的点击事件
			buttonClick(e) {
				// console.log(e.content.text)
				if (e.content.text === '加入购物车') {
					const goods = {
						goods_id: this.goods_info.goods_id,
						goods_name: this.goods_info.goods_name,
						goods_price: this.goods_info.goods_price,
						goods_count: 1,
						goods_small_logo: this.goods_info.goods_small_logo,
						goods_state: true
					}
					this.addToCart(goods)
					
				}
			},
			
			
			// ... any methods ....
		}
	}
</script>

<style lang="scss">
	.detail_box {
		margin-bottom: 50px;
		.swiper_box {
			height: 750rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.goods_info_box {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			.goods_price {
				font-size: 20px;
				color: #f00000;
			}
			.goods_discribtion_box {
				// border-bottom: 1px solid #999;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 10px 0 0;
				.goods_discribtion {
					width: 90%;
					font-size: 13px;
					border-right: 1px solid #999;
				}
				.collect_box {
					text-align: center;
					color: #ccc;
					display: flex;
					flex-direction: column;
					.collect {
						font-size: 14px;
					}
				}
			}
			.fare {
				color: #999;
				font-size: 14px;
			}
		}
		.goods_nav_box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
</style>
